<!--官网首页-->
<template>
    <div id="app">
        
        <page-header/>
        <div class="main">
            <div class="main-left">
                <div class="my-video">
                    <img class="phoneBg" src="@assets/phoneBg.png" alt="">
                    <video id="videoId" custom-cache="false" preload="auto"
                           src="//yun.linkwinning.com/web/media/video.ea4e5514.mp4" muted
                           loop="loop" type="video/mp4" @canplay="videoCanPlay()"></video>
                    <div class="case"></div>
                </div>
            </div>
            <div class="main-right">
                <img class="home_desc" src="@assets/home_desc.png" alt="">
                <div class="btns">
                    <img class="btn ios" src="@assets/ios.png" alt=""
                         @mouseenter="mouseover('ios')"
                         @mouseleave="mouseLeave('ios')">
                    <img class="btn android" src="@assets/android.png" alt=""
                         @mouseenter="mouseover"
                         @mouseleave="mouseLeave"
                    >
                    <img class="code iosCode" src="@assets/down.png" alt="" :class="ios ? 'showCode': ''"
                         @mouseenter="mouseover('ios')"
                         @mouseleave="mouseLeave('ios')"
                    >
                    <img class="code anCode" src="@assets/down.png" alt="" :class="android ? 'showCode': ''"
                         @mouseenter="mouseover"
                         @mouseleave="mouseLeave"
                    >
                </div>
            </div>
        </div>
        <page-bottom-white class="bottom"/>
        
        <div class="login-shadow" v-if="showLogin" @click="closeModal">
            <Login class="login-main"></Login>
        </div>
        
        <div class="bgc">
            <transition-group name="fadeIn" tag="ul">
                <div class="slide" v-for="(item,index) in bgList" v-show="index === showIndex" :key="'a'+index">
                    <img :src="item" alt="">
                </div>
                <!--                <img v-for="(item, index) in bgList" :src="item" alt="" v-if="index == showIndex">-->
            </transition-group>
        </div>
    </div>
</template>

<script>
    import PageHeader from '@views/PageHeader'
    import PageBottomWhite from '@views/PageBottomWhite'
    import Login from '@views/Login'
    
    export default {
        name: 'app',
        data() {
            return {
                ios: false,
                android: false,
                showLogin: false,
                showIndex: 0,
                bgList: [
                    require('@assets/bg1.jpg'),
                    require('@assets/bg2.jpg'),
                    require('@assets/bg3.jpg'),
                    require('@assets/bg4.jpg'),
                ]
            }
        },
        components: {
            PageHeader, PageBottomWhite, Login
        },
        mounted() {
            setInterval(() => {
                this.changePic()
            }, 6000)
        },
        methods: {
            mouseover(type) {
                if (type === 'ios') {
                    this.ios = true
                } else {
                    this.android = true
                }
            },
            mouseLeave(type) {
                if (type === 'ios') {
                    this.ios = false
                } else {
                    this.android = false
                }
            },
            handleClick() {
                this.showLogin = true
                // document.body.style.overflow='hidden';
            },
            closeModal(event) {
                let login = document.querySelector(".login-main")
                if (login) {
                    if (!login.contains(event.target)) {
                        this.showLogin = false
                        // document.body.style.overflow='';
                    }
                }
            },
            palyVideo() {
                let vdo = document.getElementById('videoId')
                vdo.play()
            },
            videoCanPlay() {
                this.palyVideo()
            },
            changePic() {
                if (this.showIndex < this.bgList.length - 1) {
                    this.showIndex += 1
                } else {
                    this.showIndex = 0
                }
            }
        }
    }
</script>

<style lang="less">
    body {
        margin: 0;
    }
    
    #app {
        position: relative;
        width: 100%;
        min-width: 1128px;
        height: 100vh;
        /*min-height: 800px;*/
        /*background: #fff url('~@assets/bg1.jpg') center center no-repeat;*/
        -webkit-background-size: cover;
        background-size: cover;
        /*animation: frams 30s infinite;*/
        
        .bgc {
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            z-index: -1;
            overflow: hidden;
            
            ul {
                height: 100%;
            }
            
            .slide {
                width: 100%;
                height: 100%;
            }
            
            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
        
        .fadeIn-enter-active, .fadeIn-leave-active {
            transition: all 0.1s ease;
        }
        
        .fadeIn-enter-active,.fadeIn-leave{
            opacity: 1;
        }
        .fadeIn-enter,.fadeIn-leave-active {
            opacity: 1;
        }
        
        
        .main {
            width: 1128px;
            z-index: 99;
            margin: 100px auto 0;
            .flexed();
            
            .main-left {
                width: 258px;
                height: 508px;
                margin-right: 72px;
                
                .my-video {
                    position: relative;
                    width: 258px;
                    height: 495px;
                    background: url('~@assets/phone.png') 0 0 no-repeat;
                    -webkit-background-size: 100% 100%;
                    background-size: 100% 100%;
                    overflow: hidden;
                    
                    .phoneBg {
                        position: absolute;
                        top: 0;
                        left: 1px;
                        width: 256px;
                        height: 495px;
                        z-index: 1000;
                    }
                    
                    video {
                        position: absolute;
                        top: 26px;
                        width: 206px;
                        margin-left: 29px;
                        /*height: 100%;*/
                        border-radius: 10px;
                    }
                    
                    .case {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        background-color: transparent;
                    }
                }
                
                
            }
            
            .main-right {
                .home_desc {
                    width: auto;
                    height: 120px;
                    margin-bottom: 24px;
                }
                
                .btns {
                    position: relative;
                    .flexed();
                    cursor: pointer;
                    
                    .btn {
                        width: 130px;
                        height: auto;
                        margin-right: 16px;
                        margin-left: -10px;
                    }
                    
                    .code {
                        opacity: 0;
                        position: absolute;
                        top: 40px;
                        width: 130px;
                        height: auto;
                        border-radius: 4px;
                    }
                    
                    .iosCode {
                        left: -9px;
                    }
                    
                    .anCode {
                        right: 18px;
                    }
                    
                    .showCode {
                        opacity: 1 !important;
                    }
                }
            }
        }
        
        .bottom {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .login-shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            z-index: 9999;
        }
    }
    
    @keyframes frams {
        0% {
            background: url("~@assets/bg1.jpg") center center no-repeat;
        }
        25% {
            background: url("~@assets/bg2.jpg") center center no-repeat;
        }
        50% {
            background: url("~@assets/bg3.jpg") center center no-repeat;
        }
        75% {
            background: url("~@assets/bg4.jpg") center center no-repeat;
        }
        100% {
            background: url("~@assets/bg1.jpg") center center no-repeat;
        }
    }

    @media screen and (max-width: 1280px) {
        #app {
            position: relative;
            .main {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 1128px;
                z-index: 99;
                margin-top: 0;
                .flexed();
        
                .main-left {
                    width: 180px;
                    height: 354px;
                    margin-right: 72px;
                    .my-video {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        background: url('~@assets/phone.png') 0 0 no-repeat;
                        -webkit-background-size: 100% 100%;
                        background-size: 100% 100%;
                        overflow: hidden;
                
                        .phoneBg {
                            position: absolute;
                            top: 0;
                            left: 1px;
                            width: 100%;
                            height: 100%;
                            z-index: 1000;
                        }
                
                        video {
                            position: absolute;
                            top: 20px;
                            width: 146px;
                            margin-left: 19px;
                            border-radius: 10px;
                        }
                    }
            
            
                }
        
                
            }
        }
        
    }

    @media screen and (max-height: 700px) {
        #app {
            position: relative;
            .main {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 1128px;
                z-index: 99;
                margin-top: 0;
                .flexed();
            
                .main-left {
                    width: 180px;
                    height: 354px;
                    margin-right: 72px;
                    .my-video {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        background: url('~@assets/phone.png') 0 0 no-repeat;
                        -webkit-background-size: 100% 100%;
                        background-size: 100% 100%;
                        overflow: hidden;
                    
                        .phoneBg {
                            position: absolute;
                            top: 0;
                            left: 1px;
                            width: 100%;
                            height: 100%;
                            z-index: 10000;
                        }
                    
                        video {
                            position: absolute;
                            top: 21px;
                            width: 146px;
                            margin-left: 19px;
                            border-radius: 10px;
                        }
                    }
                
                
                }
            
            
            }
        }
    
    }
</style>
